<!DOCTYPE html>
<html>
<head>
    <title>Street Map</title>
    <meta charset = "utf-8" />
	
	<link 
	rel  = "stylesheet" 
	href = "leaflet-1.03\leaflet.css" 
	/>
	
	<link 
	rel  = "stylesheet"
	href = "font-awesome-4.7.0\css\font-awesome.min.css" 
	/>
	
    <link 
	rel  = "stylesheet" 
	href = "leaflet-awesome-markers-2.0\dist\leaflet.awesome-markers.css"
	/>
	
	 <link 
	 rel  = "stylesheet" 
	 type = "text/css" 
	 href = "leaflet-markercluster-0.2\dist\MarkerCluster.css" 
	 />
	 
    <link 
	rel  = "stylesheet" 
	type = "text/css" 
	href = "leaflet-markercluster-0.2\dist\MarkerCluster.Default.css" 
	/>
	
	<!-- <link 
	rel  = "stylesheet" 
	href = "leaflet-fullscreen-1.4.2\Control.FullScreen.css" 
	/> -->

    <style>
        body {
            padding: 0;
            margin : 0;
        }
        html, body, #map {
            height: 100%;
            width : 100%;
        }
    </style>
</head>
<body>
    <div id = "map"></div>
	
	<!-- import scripts -->
    <script src  = "leaflet-1.03\leaflet.js" ></script>
	<script src  = "latlong.js"></script> 
	<script src  = "leaflet-awesome-markers-2.0\dist\leaflet.awesome-markers.js"></script>
	<script src  = "leaflet-markercluster-0.2\dist\leaflet.markercluster.js"></script>
	<!-- <script src  = "leaflet-fullscreen-1.4.2\Control.FullScreen.js"></script> -->
	
	<!-- code -->
	<script type = "text/javascript"> 
	
		<!-- map -->
        var map  = L.map('map').setView([latlong[0][0], latlong[0][1]], 12);

        mapLink  = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
			minZoom: 2,
            maxZoom: 18,
            }).addTo(map);
		<!-- end map -->
		
		<!-- add markers -->	
		var markerClusters = L.markerClusterGroup(); 	
        for (var i = 0; i < latlong.length; i++) { 
			if (i < depots){
				var lat  = latlong[i][0];
				var lon  = latlong[i][1];
				var text = latlong[i][2];
				var markerLocation = new L.LatLng(lat, lon);
				var marker = new L.Marker(markerLocation,  
				{
				 icon: L.AwesomeMarkers.icon({icon: 'home',  prefix: 'fa', markerColor: 'orange', iconColor: 'white' }),
				 draggable: false,
				 title: 'Click for more information', 
				 opacity: 1.0
				}
				);

				map.addLayer(marker);
				marker.bindPopup(text);
			}
			if (i >= depots){
				lat  = latlong[i][0];
				lon  = latlong[i][1];
				text = latlong[i][2];
				markerLocation = new L.LatLng(lat, lon);
				var marker2 = new L.Marker(markerLocation,  
				{
				 draggable: false,
				 title: 'Click for more information', 
				 opacity: 1.0
				}
				);
				markerClusters.addLayer(marker2);
				marker2.bindPopup(text);
			}
        }
		map.addLayer(markerClusters);
		<!-- end add markers -->
		
		<!-- route -->		
		
		<!-- end route -->
	
    </script>
	<!-- end code -->
	<!-- end import scripts -->
	
</body>
</html>
